<template>
	<!-- <div v-if="load_giftopen_dom" class="gift-open-but" @click="animation_play">打开礼物</div>
		<div v-if="load_giftinit_dom" class="gift-open-but" style="background-color:cadetblue;color: gold;" @click="giftinit_play">加载礼物</div> -->
	<div>
		<canvas type="webgl" v-if="modetype=='weixin'" class="demo-outside" id="webgl" />
		<view v-if="modetype=='H5'" class="demo-outside" style="z-index: 2000;" id="threeView"></view>
	</div>


</template>
<script setup>
	import {
		computed,
		onMounted,
		ref,
		watch,
		defineExpose,
		nextTick,
		getCurrentInstance,
		defineEmits
	} from 'vue'
	
	import {giftinit_animation,init,create_light,animate,loadgrassmodel,giftopen_animation,scenereset} from './happy-gift.js'

	let modetype = ref("H5")
	








	const emigFun = defineEmits(["ongiftfalldown_anim_over", "ongiftopen_anim_over"]);
	
	
	onMounted(async () => {
		await nextTick() //这个比较重要，不能删
		await init();
		create_light();
		animate();
		loadgrassmodel();
	})
	
	//加载礼物
	async function giftinit_animation_play(){
		
		await giftinit_animation()
		//向父组件传值
		emigFun("ongiftfalldown_anim_over", "over");
	}
	
	//打开礼物
	async function giftopen_animation_play(){
		await giftopen_animation()
		emigFun("ongiftopen_anim_over", "over")
	}
	
function scene_reset() {
		scenereset()
	}
	defineExpose({
		giftinit_animation_play,
		giftopen_animation_play,
		scene_reset
	})
</script>




<style>
	.demo-outside {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: bisque;
	}
</style>